<template>
  <!-- 领料申请 -->
  <view class="apply-tab-nav">
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem"  class="apply-control"/>
    </view>
    <view class="content apply-info">
      <view v-if="current === 0">
        <createApply ></createApply>
      </view>
      <view v-if="current === 1">
        <myApply ></myApply>
      </view>
      <view v-if="current === 2">
        <myApproval></myApproval>
      </view>
      <view v-if="current === 3">
        <ccToMe></ccToMe>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import createApply from "./components/create-apply.vue"
import myApply from "./components/my-apply.vue"
import ccToMe from "./components/cc-to-me.vue"
import myApproval from "./components/my-approval.vue"

const items = ref(['创建申请', '我的申请', '我的审批', '抄送我的'])
const current = ref(0)
const activeColor = ref('#C00000')
const styleType =  ref('button')
const onClickItem = (e)=>{
  if (current.value != e.currentIndex) {
    current.value = e.currentIndex;
  }
  
}

</script>

<style lang="scss">
.apply-tab-nav {
  width: 100%;
  height: 100%;
  .apply-control {
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    z-index: 99;
  }
  
  .apply-info {
    margin-top: 40px;
  }
}

</style>